
@import "./theme.less";
.contentTop{
  padding: .unit(47) .unit(30) .unit(36) .unit(30);
  .title{
    .rem(font-size,44); 
    .rem(line-height,62);
    font-weight: 500;
    color: @gray-8;
  }
  .stageInfo{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    .rem(padding-top,21);
    .rem(font-size,28);
    font-weight: 400;
    color: @gray-6;
    .stage{
      padding: .unit(10) .unit(12);
      .rem(border-radius,3);
      border: 1px solid @gray-6;
    }
    .time{
      .rem(margin-left,21);
    }
  }
  .teacherUserInfo-content{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align:end;
        -ms-flex-align:end;
            align-items:flex-end;
    .rem(margin-top,52);
    .teacherUser{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      img{
        .rem(width,98);
        .rem(height,98);
        .rem(border-radius,98)
      }
      .teacherInfo{
        .rem(margin-left,20);
        .rem(font-size,28);
        font-weight: 400;
        .name{
          color: @gray-6;
        }
        .label{
          .rem(padding-top,20)
        }
      }
    }
    .button{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      animation:mymove 3s infinite;
      -webkit-animation:mymove 3s infinite; /* Safari and Chrome */
      animation-direction:alternate;/* 轮流反向播放动画。 */
      animation-timing-function: ease-in-out; /* 动画的速度曲线 */
      /* Safari 和 Chrome */
      -webkit-animation:mymove 3s infinite;
      -webkit-animation-direction:alternate;/* 轮流反向播放动画。 */
      -webkit-animation-timing-function: ease-in-out; /* 动画的速度曲线 */
      .rem(width, 320);
      .rem(height,87);
      .rem(font-size,30);
      font-weight: 500;
      color: @white;
      background: @green;
      box-shadow: 0px .unit(2) .unit(8) 0px rgba(4, 208, 101, 0.54);
      .rem(border-radius, 44);
      .icon-weixin{
        display: inline-block;
        .rem(width, 38);
        .rem(height, 31);
        .rem(margin-right,14);
        background: url('../images/icon-weixin.png') no-repeat;
        background-size: cover
      }
    }
  }
}
@-webkit-keyframes mymove
{
    0%{
    -webkit-transform: scale(1);
            transform: scale(1);  /* 开始为原始大小 */
    }
    25%{
        -webkit-transform: scale(0.7);
                transform: scale(0.7); /* 放大1.1倍 */
    }
    50%{
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    75%{
        -webkit-transform: scale(0.7);
                transform: scale(0.7);
    }
}
@keyframes mymove
{
    0%{
    -webkit-transform: scale(1);
            transform: scale(1);  /* 开始为原始大小 */
    }
    25%{
        -webkit-transform: scale(0.7);
                transform: scale(0.7); /* 放大1.1倍 */
    }
    50%{
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    75%{
        -webkit-transform: scale(0.7);
                transform: scale(0.7);
    }
}
.tab-wrap{
  .nav{
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: #EEEEEE;
    ul{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: distribute;
          justify-content: space-around;
      li{
        position: relative;
        padding: .unit(25) 0 .unit(28) 0;
        .rem(font-size,26);
        font-weight: 400;
        color: #696969;
        &.current{
          color: #E95C14;
          font-weight: 500;
          border-bottom: 1px solid #E95C14;
          &:after{
            position: absolute;
            content: '';
            bottom: 0;
            left: 0;
            width: 100%;
            border-bottom: 1px solid #E95C14;
          }
        }
      }
    }
  }
  .list{
    display: none;
    &.show{
      display: block;
    }
    &.beforeClass{
      ul{
        li{
          a{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            padding: .unit(50) .unit(30);
            border-bottom: 1px solid #EEEEEE;
            .name{
              .rem(font-size,30);
              .rem(line-height,50);
              font-weight: 500;
              color: #333333;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
            .button{
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-pack: center;
                  -ms-flex-pack: center;
                      justify-content: center;
              -webkit-box-align: center;
                  -ms-flex-align: center;
                      align-items: center;
              -webkit-box-flex: .unit(192) 0 0;
                  -ms-flex: .unit(192) 0 0;
                      flex: .unit(192) 0 0;
              .rem(margin-left, 52);
              .rem(width, 192);
              .rem(height, 63);
              background: #FEF5EE;
              .rem(border-radius,44);
            }
          }
        }
      }
    }
    &.liveBroadcast,&.afterClass{
      ul{
        li{
          padding: .unit(25) .unit(30);
          border-bottom: 1px solid #EEEEEE;
          a{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            .content{
              -webkit-box-flex: .unit(455) 0 0;
                  -ms-flex: .unit(455) 0 0;
                      flex: .unit(455) 0 0;
              .rem(width, 455);
              .name{
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                .rem(font-size, 30);
                font-weight: 500;
                color: #333333;
                .rem(line-height, 42);
              }
              .label,.time{
                .rem(font-size,24);
                font-weight: 400;
                color: #999999;
                .rem(line-height,33);
              }
              .playback{
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                .rem(margin-left,14);
                .rem(font-size,20);
                font-weight: 400;
                color: #F85F0D;
                .icon-gengduo{
                  display: inline-block;
                  .rem(width, 8);
                  .rem(height, 14);
                  .rem(margin-left,5);
                  background: url('../images/icon-gengduo.png') no-repeat;
                  background-size: cover
                }
              }
              .time{
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
              }
              .label,.time{
                padding: .unit(22) 0 0 0;
              }
            }
            .button{
              -webkit-box-flex: .unit(192) 0 0;
                  -ms-flex: .unit(192) 0 0;
                      flex: .unit(192) 0 0;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
                  -ms-flex-align: center;
                      align-items: center;
              -webkit-box-pack: center;
                  -ms-flex-pack: center;
                      justify-content: center;
              .rem(width, 192);
              .rem(height, 63);
              .rem(font-size, 28);
              font-weight: 500;
              color: #FFFFFF;
              background: #F85F0D;
              box-shadow: 0px .unit(2) .unit(8) 0px rgba(4, 208, 101, 0.54);
              .rem(border-radius, 44);
              .icon-weixin{
                display: inline-block;
                .rem(width, 21);
                .rem(height, 24);
                .rem(margin-right,10);
                background: url('../images/icon-bofang.png') no-repeat;
                background-size: cover
              }
            }
          }
        }
      }
    }
    &.afterClass{
      img{
        display: block;
        .rem(margin-top,14);
        max-width: 100%;
      }
    }
    &.ranking{
      .user-info{
        padding: .unit(27) .unit(30) .unit(23) .unit(30);
        .row{
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
              -ms-flex-pack: justify;
                  justify-content: space-between;
          -webkit-box-align: stretch;
              -ms-flex-align: stretch;
                  align-items: stretch;
          padding: .unit(26) .unit(27);
          background: #3B6FFE;
          .rem(border-radius, 8);
          .col{
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            .rem(padding-left,44);
            color: #FFFFFF;
            border-right: 1px solid rgba(255, 255, 255, 0.2);
            img{
              .rem(width, 52);
              .rem(height, 52);
              .rem(border-radius,52)
            }
            .label{
              .rem(font-size, 26);
              font-weight: 400;
            }
            .data{
              .rem(padding-top,18);
              .rem(font-size, 38);
              font-weight: 500;
            }
            &.user{
              padding-left: 0;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
                  -ms-flex-align: center;
                      align-items: center;
              .user-name{
                .rem(margin-left,13);
                .rem(font-size, 26);
                font-weight: 400;
              }
            }
            &:last-child{
              border: none;
            }
          }
        }
      }
      ul{
        li{
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
              -ms-flex-pack: justify;
                  justify-content: space-between;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          padding: .unit(28) .unit(115) .unit(28) .unit(30);
          .rem(font-size, 26px);
          font-weight: 400;
          border-bottom: 1px solid #EEEEEE;
          &.top{
            color: #999999;
          }
          .content{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            color: #333333;
            img{
              margin: 0 .unit(14);
              .rem(width,39);
              .rem(height,39);
              .rem(border-radius,39);
            }
          }
          .duration{
            color: #3B6FFE;
          }
        }
      }
    }
  }
}
.WeChatGroup-wrap{
  display: none;
  .greyBg{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.32);
  }
  .contentGroup{
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    .rem(min-height, 664);
    text-align: center;
    background: #ffffff;
    .book{
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      .rem(top,-33);
      .rem(height,89);
    }
    .icon-close{
      position: absolute;
      .rem(right,34);
      .rem(top,30);
      .rem(width,28);
      .rem(height,28);
      background: url("../images/icon-close.png") no-repeat;
      background-size: cover;
    }
    .describe{
      .rem(padding-top,62);
      .rem(font-size, 36);
      font-weight: 500;
      color: #FD5807;
      .rem(line-height, 50px)
    }
    .label{
      margin: .unit(25) auto .unit(49) auto;
      .rem(width,424);
      .rem(height,77);
      .rem(font-size, 30);
      .rem(line-height, 62);
      font-weight: 400;
      color: #FFFFFF;
      background: url("../images/img2.png") no-repeat;
      background-size: cover;
    }
    .qrcode-images{
      margin: 0 auto;
      .rem(width,300);
      .rem(height,300);
    }
    .phone{
      .rem(margin,28);
      .rem(font-size, 28);
      font-weight: 500;
      color: #333333;
      .rem(line-height, 40);
      a{
        color:#FD5807;
      }
    }
  }
}